<gm:page title="Global Stock Watch 2" css="/css/g.css" class="googleTheme" >

    <!--
       Global Stock Watch (based on the GME Team's Maps Mashup sample).
       Markers are the major stock exchanges from around the world. Each
       one is associated with a leading index (i.e New York - S&P 500; 
       Shanghai - Shanghai Composite). The number in the bubbles is the
       percentage the index has changed (up, or down) since its previous
       close.
       @author: Mark   
   -->

  <script type="text/javascript"> 
  <![CDATA[    
     
    //retrieves market indices data from atom:summary and adds html to the feed
    //that loads an appropriate arrow icon (i.e. up or down) to each infoWindow    
    function onLoadf() {
    
     var myGMap = google.mashups.getObjectById('myMap').getMap();
    
     var blueIcon = new GIcon(G_DEFAULT_ICON);
  		blueIcon.image = "resources/down.png";
	 alert("1");	
		// Set up our GMarkerOptions object
		var markerOptions = { icon:blueIcon, title:"London", draggable:true };
    
     alert("2");	
    var point = new GLatLng(51.514459,0.100123);
     myGMap.clearOverlays();
     myGMap.addOverlay(new GMarker(point, markerOptions));
 alert("3");	
      /*  // Add 10 markers to the map at random locations
        var bounds = myGMap.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          
          myGMap.addOverlay(new GMarker(point, markerOptions));
        } */
         alert("4");	
    }
       
  ]]></script>

  <div style="height:150px;">
    <table width="100%">
      <tr> 
        <td valign="top" align="left"><img src="resources/gmw.png"/></td>       
      </tr> 
    </table></div>

    <table width="900">
      <tr valign="top">
        <td width="300">
           <div style="font-size:80%; height:500; overflow:auto;">
             <gm:list id="myList" 
                      data="http://pipes.yahoo.com/pipes/pipe.run?_id=tnDswU5d3BGq6NWjEpPZnA&_render=rss" 
                      pagesize="40">
               <gm:handleEvent src="myMap" event="select"/>
            </gm:list>
          </div>
       </td>
       <td class="mainPanel">
         <gm:map id="myMap"
                 height="500px"
                 data="${myList}" 
                 latref="geo:lat" 
                 lngref="geo:long" 
                 infotemplate="detailTemplate">
           <gm:handleEvent src="myList" event="select"/>
         </gm:map>
       <input type="button" name="myButton" value="Test onLoadf" onclick="onLoadf()" />
       </td>
     </tr>    
   </table>

   <gm:template id="detailTemplate">
     <div style="background-color:ffffff;" repeat="true">
       <gm:text ref="atom:title"/><br/>        
       <b><gm:html ref="atom:summary"/></b>
     </div>
   </gm:template>
 
</gm:page>




























